<template>
  <!-- 落实金额表单弹窗 -->
  <a-modal v-bind="$attrs" v-on="$listeners" :title="headerTitle" :visible.sync="dialogVisible" @cancel="handleCancel">
    <!-- 表单 -->
    <a-form-model ref="ruleForm" :model="forms" :rules="rules" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
      <div id="dialogDistrictBox">
        <a-row>
          <a-col :span="24">
            <a-form-model-item prop="implementationAmount" label="本次落实金额">
              <BaseInputNumber
                :max="1000000000000"
                :min="0"
                :formatter="(value) => `${value}元`"
                :parser="(value) => value.replace('元', '')"
                placeholder="请输入"
                v-model="forms.implementationAmount"
                :precision="2"
              ></BaseInputNumber>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item prop="fileArrays" label="奖罚凭证">
              <upload-list v-if="visible" businessCode="PM04" :uploadArrys="forms.fileArrays" @fileArrysData="fileArrysData" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </div>
    </a-form-model>
    <!-- 页脚操作栏 -->
    <div slot="footer" class="btn_box">
      <a-button :loading="loading" type="primary" class="button_right" @click="handleOk">提交</a-button>
      <a-button type="primary" @click="handleCancel">关闭</a-button>
    </div>
  </a-modal>
</template>

<script>
import UploadList from '@/components/UploadList' // 文件上传

export default {
  name:'a'+ Date.now(),
  components: {
    UploadList,
  },
  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      },
    },
    // 表单
    form: {
      type: Object,
      default() {
        return null
      },
    },
    // 标题
    headerTitle: {
      type: String,
      default() {
        return ''
      },
    },
  },
  computed: {
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      },
    },
  },
  data() {
    let validator = (rule, value, callback) => {
      if (value <= this.form.rewardAndPenaltyAmount) {
        callback()
      } else {
        callback(new Error('落实金额不能大于奖罚金额'))
      }
    }
    return {
      forms: {},
      loading: false,
      rules: {
        implementationAmount: [{ required: true, message: '请输入落实金额', trigger: 'change' },{validator:validator}],
        fileArrays: [{type:'array', required: true, trigger: 'blur', message: '请上传奖罚依据', }],
      },
    }
  },
  watch: {
    'forms.fileArrays'(e) {
      this.$nextTick(()=>{
        this.$refs.ruleForm?.validateField('fileArrays')
      })
    },
  },
  methods: {
    fileArrysData(val) {
      if (this.forms.fileArrays && this.forms.fileArrays.length > 0) {
        this.forms.fileArrays = val
      } else {
        this.$set(this.forms, 'fileArrays', val)
      }
    },
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$emit('confirm', this.forms)
        } else {
          this.$message.warning("请填写完所有必填项信息")
          // console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      this.dialogVisible = false
    },
  },
  watch: {
    visible(e) {
      if (e) {
        this.$nextTick(() => {
          this.forms.id = this.form.id
          this.$set(this.forms,'implementationAmount',this.form.rewardAndPenaltyAmount)
        })
      } else {
        this.forms = {}
        this.$refs.ruleForm.clearValidate()
      }
    },
  },
}
</script>
